<script lang="ts" setup>
import { computed, ref,onMounted } from 'vue'
import { useStore } from "@/store";
import { useI18n } from 'vue-i18n'
import { getErc20Balance } from '@/utils/contrats'
import { USDT } from '@/config/constants/normalToken'
import { lang } from '@/config/lang'
import { WalletInfo } from '@/types';
import routes from '@/router';
import {useRouter,RouteRecordRaw} from 'vue-router'

const routerList = useRouter().getRoutes().filter(item=>{
  return item?.children?.length>0
})[0].children
const menuList = ref<RouteRecordRaw[]|any>(routerList);


const store = useStore()

const account = computed(() => store.state.account) || ""
const connect = ref<boolean | any>(account)

const walletVisiable = ref<boolean>(false)
let wallet = ref<WalletInfo[]>([])
async function walletInfo() {
  wallet.value = []
  //BNB
  wallet.value.push(await getErc20Balance(undefined))
  //USDT
  wallet.value.push(await getErc20Balance(USDT.address))
  walletVisiable.value = true
}

function disconnect() {
  localStorage.removeItem("account")
  store.commit("account", '')
  window.location.reload()
}

const { locale } = useI18n();
locale.value = localStorage.getItem("locale") || locale.value
const targetOffset = ref<number | undefined>(undefined);
onMounted(() => {
  targetOffset.value = window.innerHeight / 2;
});
const language: any = lang
function changeLanguage(string: any) {
  if (locale.value == string) {
    return
  }
  locale.value = string
  localStorage.setItem("locale", string)
}
</script>

<template>
  <div class="logo">Homura</div>
  <div class="nav">
    <a-menu
        :defaultSelectedKeys="[$route.path]"
        :selectedKeys="[$route.path]"
        mode="horizontal"
    >
      <a-menu-item :key="menu.path" v-for="menu in menuList">
        <template #icon>
          <component class="align-middle text-white" :is="menu.meta.icon" />
        </template>
        <router-link :to="menu.path">
          <span class="align-middle text-white">{{ $t("nav."+menu.meta.title) }}</span>
        </router-link>
      </a-menu-item>
      <a-menu-item v-if="connect">
        <a-dropdown :trigger="['click']">
          <div v-if="account?.length > 0" class="ant-dropdown-link align-middle text-white" @click.prevent>
            {{ account.substring(0, 2) + "..." + account.substring(account?.length - 4, account?.length) }}
          </div>
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="walletInfo">
                <wallet-outlined />
                {{ $t('wallet.wallet') }}
              </a-menu-item>
              <a-menu-item key="2">
                <user-switch-outlined />
                {{ $t('wallet.recentTransactions') }}
              </a-menu-item>
              <a-sub-menu key="language">
                <template #title>
                  <translation-outlined />
                  {{ $t('wallet.language') }}
                </template>
                <a-menu-item  v-for="lang in language" :key="lang.lang" @click="changeLanguage(lang.lang)">
                  {{ lang.name }}
                </a-menu-item>
              </a-sub-menu>
              <a-menu-divider />
              <a-menu-item key="3" @click="disconnect">
                <export-outlined />
                {{ $t('wallet.disconnect') }}
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-menu-item>
      <a-menu-item v-if="!connect">
        <a-button type="primary" @click="store.dispatch('connect')">{{ $t('connectedWallet') }}</a-button>
      </a-menu-item>
    </a-menu>
    <a-modal v-model:visible="walletVisiable" :title="$t('wallet.wallet')" centered footer="">
      <p v-for="token in wallet">{{ token.ethName }} : {{ token.balance }}</p>
    </a-modal>
  </div>
</template>
<style scoped>
.logo{
  @apply md:float-left md:w-36 text-center text-white;
}
.nav{
  @apply hidden md:block;
}
</style>
<style>
.ant-menu{
  background: transparent;
  border-bottom: none;
}
</style>
